<template>
    <div class="page home-ui">
        <ScrollPull>
            <cube-slide ref="slide" :data="bannerList">
                <cube-slide-item v-for="(item, index) in bannerList" :key="index">
                    <a :href="item.url">
                        <img style="width: 100%;height: 5.5rem" :src="item.img">
                    </a>
                </cube-slide-item>
            </cube-slide>
            <div class="ad">
                <img style="width: 0.37rem;height: 0.32rem;margin: 0 0.32rem 0 0.28rem" src="./img/horn.png">
                <div class="marquee-outer-wrapper">
                    <div class="marquee-inner-wrapper">
                        <div class="first-marquee">{{poster}}</div>
                    </div>
                </div>
            </div>
            <div class="seek-box">
                <div class="share-box">
                    <img style="width: 0.39rem;height: 0.43rem" src="./img/share.png">
                    <span>经验分享</span>
                </div>
                <div class="share-box">
                    <cube-input v-model="seekValue" placeholder="全局搜索"></cube-input>
                    <img style="width: 0.41rem;height: 0.43rem;margin-left: 0.28rem" src="./img/seek.png">
                </div>
            </div>
            <div class="content-box" v-for="(item,index) in contentList" :key="index">
                <img :src="item.imgs">
                <div class="info">
                    <p>{{item.title}}</p>
                    <span>{{item.content}}</span>
                </div>
            </div>
        </ScrollPull>
    </div>
</template>
<script>
    import ScrollPull from '../../components/Scroll/scrollPull'
    import { getHomeBanner, getExperienceList, getNotice } from '../../api/home'
    export default {
        components: {
            ScrollPull
        },
        created() {
            getHomeBanner().then(res=> {
                this.bannerList = res.data
            })
            getExperienceList().then(res=> {
                this.contentList = res.data
            })
            getNotice().then(res=> {
                console.log(res.data)
                if (res.data) {
                    let poster = null
                    res.data.forEach(function (el) {
                        poster = el.title + ':' + el.content + '    '
                    })
                    this.poster = poster
                }
            })
        },
        data() {
            return {
                seekValue: null,
                bannerList: [],
                poster: null,
                contentList: []
            }

        },
    }
</script>
<style type="text/stylus" lang="stylus">
    .home-ui
        .cube-slide-dots
            span.active
                background #327A8A
        .cube-input
            input
                padding 0 0.2rem
                font-size 16px

</style>
<style scoped type="text/stylus" lang="stylus">
    .page
        width 100%
        height 100%
        padding-bottom 1.43rem
        background #FFF
        .ad
            width 9.2rem
            height 0.59rem
            border-radius 4px
            margin 0.32rem auto
            border 1px #327A8A solid
            display flex
            justify-content start
            align-items center
            .marquee-outer-wrapper {
                overflow: hidden;
                width: 80%;
                display: flex;
                justify-content space-between
                align-items center
            }
            .marquee-inner-wrapper{
                height: 0.59rem;
                font-size: 14px;
                color: #333333;
                line-height: 0.59rem;
                margin: 0 auto;
                white-space: nowrap;
                position: relative;
            }
            .marquee-inner-wrapper span{
                position: absolute;
                top: 0;
                left: 100%;
                height: 100%;
            }
            .first-marquee{
                -webkit-animation: 3s first-marquee linear infinite normal;
                animation: 15s first-marquee linear infinite normal;
                padding-right: 70%;
            }
            @keyframes first-marquee {
                0% {
                    -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
                }
                100% {
                    -webkit-transform: translate3d(-200%, 0, 0);
                    transform: translate3d(-200%, 0, 0);
                    display: none;
                }
            }
        .seek-box
            width 92%
            padding 0 4%
            height 1rem
            display flex
            justify-content space-between
            align-items center
            .share-box
                display flex
                justify-content start
                align-items center
                width 50%
                span
                    font-size 0.43rem
                    color #327A8A
                    font-weight:500;
                    line-height 1rem
                    margin-left 0.33rem
        .content-box
            height 2.51rem
            width 92%
            padding 0 4%
            border-top 1px #eee solid
            display flex
            justify-content start
            align-items center
            img
                width 3.52rem
                height 1.87rem
            .info
                display flex
                justify-content space-between
                flex-direction column
                margin-left 0.28rem
                height 1.87rem
                padding-left 3%
                p
                    font-size 0.4rem
                    color #327A8A
                    line-height 0.8rem
                    overflow hidden
                    text-overflow:ellipsis;
                    white-space: nowrap;
                span
                    height 0.7rem
                    line-height 0.35rem
                    font-size 0.32rem
                    overflow hidden
                    text-overflow:ellipsis;
</style>
